﻿@{
    Layout = "";
}
<style>
    .ngdialog.ngdialog-theme-plain .ngdialog-content {
        width: 45% !important;
    }
</style>
<div ng-controller="ImageTextEditController">
    <div class="panel panel-default ng-scope">
        <div class="panel-heading">
            <h3>编辑图文素材</h3>
        </div>
        <div class="panel-body">
            <form class="form-validate form-horizontal ng-pristine ng-valid" ng-submit="Save()" name="formValidate" novalidate="">
                <div ng-repeat="imageText in ImageTexts">

                    <fieldset id="fs{{$index}}">
                        <legend>
                            {{$index==0?'主文章编辑':'子文章编辑'}}
                            <button type="button" style="float: right" class="btn btn-danger" ng-click="Delete(imageText,$index)"><em class="fa fa-trash-o"></em></button>
                        </legend>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">文章标题</label>
                            <div class="col-sm-6">

                                <table style="width: 100%">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" ng-model="imageText.Title" class="form-control" maxlength="64" required="" name="Title">

                                            </td>
                                            <td style="width: 2rem"><h4 class="text-danger">*</h4></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <span ng-show="validateInput('Title', 'required')" class="text-danger">请输入文章标题。</span>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">文章摘要</label>
                            <div class="col-sm-6">
                                <table style="width: 100%">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" ng-model="imageText.Description" maxlength="120" class="form-control">
                                            </td>
                                            <td style="width: 2rem">
                                                <h4 class="text-danger" style="color: white"></h4>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                文章链接
                                <br />
                                <span class="text-sm text-muted" style="text-wrap: none"></span>
                            </label>
                            <div class="col-sm-6">
                                <table style="width: 100%">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="url" maxlength="500" ng-model="imageText.Url" placeholder="以http://或者https://开头" name="Url" required="" class="form-control">
                                            </td>
                                            <td style="width: 2rem"><h4 class="text-danger">*</h4></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <span ng-show="validateInput('Url', 'url')" class="text-danger">请设置文章链接。</span>

                                @*<input type="text" ng-model="imageText.Url" class="form-control">*@
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">封面图片</label>
                            <div class="col-sm-3" style="min-width:240px">
                                <div class="imgcrop-preview" uploader="uploader" style="min-width: 240px;">
                                    <img ng-src="{{imageText.PicUrl}}" style="max-width: 100%; max-height: 100%; " onerror="javascript: this.src = '/Content/img/default.png';" />
                                    <input id="fileInput" type="file" style="display: none;" nv-file-select="" uploader="uploader" />

                                </div>
                                <div style="margin-bottom: 0px" class="progress progress-xs" ng-show="uploading">
                                    <div role="progressbar" ng-style="{ 'width': uploader.progress + '%' }" class="progress-bar"></div>
                                </div>
                                <span ng-show="Saved&&!imageText.PicUrl" class="text-danger">请上传封面图片。</span>

                            </div>
                            <div class="col-sm-6">
                                <table style="width: 100%">
                                    <tbody>
                                        <tr>
                                            <td style="width: 100px">
                                                <button type="button" class="mb-sm btn btn-info" ng-click="selectImage(imageText)">
                                                    图片选择
                                                </button>
                                            </td>
                                            <td>
                                                <h4 ng-if="$index==0" class="text-danger">*&nbsp;&nbsp;建议宽高：900px*500px</h4>

                                                <h4 ng-if="$index>0" class="text-danger">*&nbsp;&nbsp;建议宽高：320px*320px</h4>

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </fieldset>
                </div>
                <fieldset ng-hide="ImageTexts&&ImageTexts.length>=8">
                    <legend class="text-right mt-sm ng-scope">

                        <button type="button" class="btn btn-labeled btn-success" ng-click="AddNew()">
                            <span class="btn-label">
                                <em class="fa fa-plus"></em>
                            </span>添加子文章
                        </button>

                    </legend>

                </fieldset>

                <div class="text-right mt-lg ng-scope">

                    <button type="button" class="btn btn-warning" ui-sref="app.imagetext">返回</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>

        </div>

    </div>
    <script type="text/ng-template" id="deleteConfirmDialog">
        <div class="ngdialog-message text-center">
            <h3>确定要删除吗?</h3>
            <p>删除后，设置的相关自动回复内容将不再回复该图文素材。删除后，不可恢复，是否确认删除？</p>
            <br />
            <button type="button" ng-click="confirm()" class="btn btn-primary mr">确认</button>
            <button type="button" ng-click="closeThisDialog('button')" class="btn btn-default">取消</button>
        </div>
    </script>
</div>
<script type="text/javascript">
    App.controller('ImageTextEditController', ["$scope", "$state", "$http", "$stateParams", "Notify", "$filter", "FileUploader", "$rootScope", "ngDialog",
        function ($scope, $state, $http, $stateParams, Notify, $filter, FileUploader, $rootScope, ngDialog) {
            $scope.GroupId = $stateParams.groupid;
            if ($scope.GroupId && $scope.GroupId !== '0') {

                $http.post("/WxSet/GetByGroupid", { GroupId: $scope.GroupId }).success(function (data) {
                    $scope.ImageTexts = data;
                });
            } else {
                $scope.ImageTexts = [];
                $scope.ImageTexts.push({ Id: 0, GroupId: $scope.GroupId });
            }

            $scope.validateInput = function (name, type) {
                var input = $scope.formValidate[name];
                if (input) {
                    return (input.$dirty || $scope.submitted) && input.$error[type];
                }

            };

            $scope.Delete = function (imageText, index) {
                if (imageText.Id > 0) {
                    ngDialog.openConfirm({
                        template: 'deleteConfirmDialog',
                        className: 'ngdialog-theme-default'
                    }).then(function (value) {

                        $http.post("/WxSet/DeleteById", { Id: imageText.Id, GroupId: $scope.GroupId }).then(function (returnData) {
                            if (returnData.data.isSuccess) {

                                //  console.log($scope.ImageTexts)

                                $scope.ImageTexts.splice(index, 1);

                                // console.log($scope.ImageTexts)

                                if (!$scope.ImageTexts || $scope.ImageTexts.length == 0) {
                                    $state.go("app.imagetext");
                                }
                                Notify.alert('操作成功!', { status: 'success', timeout: 1000 });
                            } else {
                                Notify.alert(returnData.data.msg, { status: 'warning', timeout: 1000 });
                            }
                        });
                    },
                        function (reason) {
                        }
                    );
                } else {
                    $scope.ImageTexts.splice(index, 1);
                    //    Notify.alert('操作成功!', { status: 'success', timeout: 1000 });
                }


            }

            $scope.Save = function () {
                $scope.Saved = true;
                if ($scope.formValidate.$valid) {

                    console.log($scope.ImageTexts)

                    for (var i = 0; i < $scope.ImageTexts.length; i++) {
                        if (!$scope.ImageTexts[i].PicUrl) {
                            Notify.alert("请上传封面图片", { status: 'warning', timeout: 1000 });
                            $("html,body").animate({ scrollTop: $("#fs" + i).offset().top }, 800);
                            return false;
                        }
                    };

                    $http.post("/WxSet/SaveAllImageText", { ImageTexts: $scope.ImageTexts }).success(function (data) {
                        if (data.isSuccess) {
                            Notify.alert('保存成功!', { status: 'success', timeout: 1000 });
                            $state.go("app.imagetext");
                        } else {
                            Notify.alert("操作失败", { status: 'warning', timeout: 1000 });
                        }
                    });

                } else {
                    Notify.alert("请填写完整", { status: 'warning', timeout: 1000 });
                }
            }

            $scope.AddNew = function () {
                $scope.ImageTexts.push({ GroupId: $scope.GroupId });
            }
            $scope.selectImage = function (imageText) {

                $scope.NowUpload = imageText;
                uploader.onSuccessItem = function (fileItem, response, status, headers, imageText) {
                    $scope.NowUpload.PicUrl = $rootScope.ImgHostUrl + response[0];
                    $("#fileInput").val("");
                };

                $("#fileInput").click();
            }
            var uploader = $scope.uploader = new FileUploader({
                url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=ImageText'
            });
            uploader.filters.push({
                name: 'customFilter',
                fn: function (item /*{File|FileLikeObject}*/, options) {
                    return this.queue.length < 10;
                }
            });

            // CALLBACKS

            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                //  console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {
                //   console.log(fileItem);
                if (fileItem.file.size >= 1024 * 2 * 1024) {
                    Notify.alert("图片过大，请上传2M以内的图片", { status: 'warning', timeout: 1000 });
                }
                else if (fileItem.file.type.indexOf('image/') < 0) {
                    Notify.alert("只能上传图片文件", { status: 'warning', timeout: 1000 });
                }
                else {
                    fileItem.upload();
                    $scope.uploading = true;
                }



                //    console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                //   console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                // console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                // console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                //  console.info('onProgressAll', progress);
            };
            //uploader.onSuccessItem = function (fileItem, response, status, headers) {
            //    $scope.Activity.HeadPicUrl = response[0];
            //    $("#fileInput").val("");
            //};
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                //  console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                // console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                //  console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                $scope.uploading = false;
            };
        }]);
</script>

